<template>
  <div>
<!--    <div class="svg_main" ref="svg_main">-->
<!--      <div class="div_relative" style="position: relative;margin: auto"-->
<!--           >-->

        <svg width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 830 549">
          <g >
            <ellipse class="star" stroke-width="0" ry="3" rx="3" id="svg_2" cy="434" cx="102.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_3" cy="393" cx="18.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_6" cy="107" cx="421.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"   stroke-width="0" ry="3" rx="3" id="svg_7" cy="119" cx="384.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_10" cy="358" cx="117.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_11" cy="437" cx="66.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_12" cy="477" cx="76.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_13" cy="573" cx="97.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_14" cy="46" cx="700.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_15" cy="40" cx="511.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_16" cy="91" cx="606.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_18" cy="348" cx="86.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_19" cy="555" cx="41.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_20" cy="569" cx="175.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_21" cy="192" cx="666.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_22" cy="164" cx="747.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_23" cy="281" cx="691.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_24" cy="327.89938" cx="713.54768" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_29" cy="526.29628" cx="629.43621" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_30" cy="419.51048" cx="644.65651" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_31" cy="297" cx="755.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_32" cy="559.00526" cx="500.62135" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_35" cy="238" cx="101.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_41" cy="82" cx="144.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_43" cy="249" cx="155.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_49" cy="75" cx="57.5" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_65" cy="485.57185" cx="535.76932" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_66" cy="449.33714" cx="612.1105" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_67" cy="492.73035" cx="219.9607" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_68" cy="285.14764" cx="34.22476" stroke="#000" fill="#00BFFF"/>
            <ellipse class="star"  stroke-width="0" ry="3" rx="3" id="svg_69" cy="469.06347" cx="139.99227" stroke="#000" fill="#00BFFF"/>
          </g>
        </svg>

<!--      </div>-->

<!--    </div>-->

  </div>

</template>

<script>
  import {gsap} from 'gsap/all'


  export default {
    name: 'base-star-gsap',
    components: {
    },
    data() {
      return {
        svg_img_width: '',
        svg_img_height: ''
      }
    },
    mounted() {
      //register the plugin (just once)
      // gsap.registerPlugin(MotionPathPlugin);
      this.createMainGsap() //创建动画
      // let svg_main_height = svg_main_client.height;
      // this.setSvgImgSize(svg_main_height)  //为图片和图片的父级div创建宽高

    },
    methods: {
      createMainGsap() {
        gsap.to(".star", {
          duration: 1.8,
          scale:"random(0.5,1.5)",
          repeat: -1,
          yoyo:true,
          opacity: "random(0,1)"
        });
      },
      setSvgImgSize(svgMainHeight) {
        let me = this
        let svg_img_client = me.$refs.img_main.getBoundingClientRect();
        me.svg_img_height = svgMainHeight;
        me.svg_img_width = svgMainHeight * 830 / 549;
        window.addEventListener('resize', function () {
          me.svg_img_height = svgMainHeight;
          me.svg_img_width = svgMainHeight * 830 / 549;
        })
      }
    },
    computed: {}
  }
</script>

<style scoped>


</style>
